
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">存储管理</span>
        </div>
        <div class="header-right-wraper">
          <Input
            v-model="valueData"
            placeholder="请输入关键字"
            style="width: 200px"
            class="headerMar"
          />
          <Button
            type="primary"
            @click="selectData"
            class="system-btn-style headerMar"
            style="margin-right: 10px"
          >
            <Icon type="ios-search" />&nbsp;查询
          </Button>
          <Button
            type="warning"
            @click="addStorage()"
            class="system-btn-style headerMar"
          >
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;存储
          </Button>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList
            ref="table"
            :getColumn="getColumns"
            :getAxios="getAxios"
            @selectionChange="selectionChange"
          >
            <template v-slot:status="items">
              <!-- {{items.data.row.status == 'Running' ?"运行中":"已禁止"}} -->
              <span
                v-if="items.data.row.status == 'Running'"
                style="color: blue"
                >在线</span
              >
              <span v-else style="color: red">离线</span>
            </template>
            <template v-slot:show_details="item">
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="editStorage(item.data.row)"
                >修改
              </CButton>
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="deleteData(item.data.row)"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      :styles="modalStyle"
      title="删除节点信息"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span>删除存储信息</span>
      </p>
      <div class="modalBody">
        <p>删除存储信息时与存储信息相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!--创建节点组-->
    <Modal v-model="checkTaskZu" draggable scrollable :width="600">
      <p slot="header" class="modalHeader">
        <!-- <img src="@/assets/icons/search.png" alt />-->
        <span style="margin-left: 5px">{{
          currentClickItem ? "更新存储信息" : "添加存储信息"
        }}</span>
      </p>
      <div class="delKuangBody">
        <Form
          ref="form"
          :model="formItem"
          :label-width="80"
          :rules="formItemRule"
        >
          <FormItem label="存储名" prop="name">
            <Input
              v-model="formItem.name"
              placeholder="请输入节点组名称"
            ></Input>
          </FormItem>
          <FormItem label="存储路径" prop="storePath">
            <Input
              v-model="formItem.storePath"
              placeholder="请输入存储路径"
            ></Input>
          </FormItem>
          <FormItem label="描述">
            <Input
              v-model="formItem.description"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入描述信息"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="handleReset" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="checkTaskOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";

export default {
  name: "nodesManagement",
  components: { TableList },
  data() {
    return {
      formItemRule: {
        name: {
          required: true,
          message: "请输入存储名称",
          trigger: "blur",
        },
        storePath: {
          required: true,
          message: "请输入存储路径",
          trigger: "blur",
        },
      },
      clickId: "",
      delShow: false,
      nodeValue: "",
      getColumns: [
        {
          title: "存储名称",
          key: "name",
          align: "center",
        },
        {
          title: "描述",
          key: "description",
          align: "center",
        },
        {
          title: "存储路径",
          key: "storePath",
          align: "center",
        },
        {
          title: "总空间(T)",
          key: "totalStorage",
          align: "center",
        },
        {
          title: "已用空间(T)",
          key: "usedStorage",
          align: "center",
        },
        {
          title: "剩余空间(T)",
          key: "freeStorage",
          align: "center",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerText",
          width: "220",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          slot: "status",
          align: "center",
        },

        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          align: "center",
          width: "220",
        },
      ],

      getAxios: {
        url: this.$api.monitorApi.getShareStorage, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },

      checkTaskZu: false,
      formItem: {},
      currentClickItem: "",
    };
  },

  methods: {
    editStorage(row) {
      this.checkTaskZu = true;
      this.currentClickItem = JSON.parse(JSON.stringify(row));
      this.formItem = JSON.parse(JSON.stringify(row));
    },
    addStorage() {
      this.formItem = {};
      this.currentClickItem = "";
      this.checkTaskZu = true;
    },
    delOk() {
      let self = this;
      let path = this.$api.monitorApi.shareStorage + self.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.$refs.table.getRefreshTable();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },
    delCancel() {
      this.delShow = false;
    },
    selectData() {
      let self = this;
      let path = this.$api.monitorApi.getShareStorage;
      let param = {
        pageNum: 0,
        pageSize: 0,

        name: this.valueData,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      return;
    },
    deleteData(val) {
      this.delShow = true;
      this.clickId = val.id;
    },
    checkTaskOk(name) {
      let self = this;

      self.$refs.form.validate((valid) => {
        if (valid) {
          let path = this.currentClickItem
            ? this.$api.monitorApi.editshareStorage + this.currentClickItem.id
            : this.$api.monitorApi.addshareStorage;
          let param = {
            description: self.formItem.description,
            name: self.formItem.name,
            storePath: self.formItem.storePath,
          };

          if (!this.currentClickItem) {
            this.http.post(path, param).then((res) => {
              if (res.data.success) {
                this.$Message.success(res.data.message);
                this.checkTaskZu = false;
                this.$refs.table.getRefreshTable();
              } else {
                this.$Message.error(res.data.message);
              }
            });
          } else {
            this.http.put(path, param).then((res) => {
              if (res.data.success) {
                this.$Message.success(res.data.message);
                this.checkTaskZu = false;
                this.$refs.table.getRefreshTable();
              } else {
                this.$Message.error(res.data.message);
              }
            });
          }
        } else {
          this.$Message.error("请完成表单！");
        }
      });
    },
    handleReset() {
      this.checkTaskZu = false;
      this.currentClickItem = "";
      this.formItem = {};
      //   this.$refs[name].resetFields();
    },

    selectionChange(data) {
      // 选中的数据
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}

/deep/.ivu-form-item {
  margin-bottom: 10px;
}
</style>



